<template>
    <div class="wrap">
        <header>
            <p>房屋求租</p>
        </header>
        <main>
            <box>
                <!-- 选中栏 -->
                <div @click="changeIndeFun('CarIndex' , 1)">
                    {{ groupsData[carGropsIndex].desc }}
                </div>

                <div @click="changeIndeFun('CarIndex' , 2)">
                    {{ cityData[carCityIndex].label }}
                </div>

                <!-- 打开选中的盒子 -->
                <div v-if="CarIndex == 1" class="CarDiv">
                    <span v-for="(item , index) in groupsData" :key="index"
                        @click="changeIndeFun('carGropsIndex' , index , item)"
                    >
                        {{ item.desc }}
                    </span>
                </div>

                <div v-if="CarIndex == 2" class="CarDiv">
                    <span v-for="(item , index) in cityData" :key="index"
                        @click="changeIndeFun('carCityIndex' , index , item)"
                    >
                        {{ item.label }}
                    </span>
                </div>
            </box>

            <!-- 幕布 -->
            <div v-if="!CarIndex == 0" class="MB" @click="changeIndeFun('CarIndex' , 0)">
            </div>

            <div class="Main_div">
                <div class="Main_Item" v-for="(item , index) in HomeArr" :key="index">
                    <div class="Item_InFo">
                        <div class="InFo_Img">
                            头像
                        </div>
                        <div class="InFo_tite">
                            <span>
                                用户名称
                            </span>
                            <span>
                                1天前
                            </span>
                        </div>
                        
                    </div>

                    <p>
                        {{ item.desc }}
                    </p>
                    <div class="tagsDiv">
                        <p>
                            意向区域: <span v-for="(ite , ind) in item.tags" :key="ind">
                                {{ ite }}
                            </span>
                        </p>
                        意向价格: <span>{{item.price}}/元</span>
                        <p>
                            <span @click="SubFun(index)">信息</span>
                            <span @click="SubFun(index)">电话</span>
                        </p>
                    </div>

                </div>
            </div>
            
        </main>
    </div>
</template>

<script>

import { GetCityArray , GetCityArray_groups , GetHomeArr } from './../../services';

export default {
    data() {
        return {
            // 筛选用列表
            cityData : [],
            groupsData : [],
            HomeArr : [],

            // 选中下标
            carGropsIndex : 0,
            carCityIndex : 0,

            // 选中下标
            CarIndex : 0
        }
    },

    created(){
        console.log('created...');
        this.getData();
        // console.log(this.$mp)
    },

    methods: {
        // 获取数据
        async getData(){
            let result_1 = await GetCityArray();
            let result_2 = await GetCityArray_groups();
            let result_3 = await GetHomeArr();
            
            // 赋值
            if(result_1.body && result_2.body)
            {
                this.cityData = result_1.body;
                this.groupsData = result_2.body
                this.HomeArr = result_3.body.list
                console.log( 'result....' , result_1.body , result_2.body , result_3.body.list);
            }
        },

        // 改变下标
        changeIndeFun( target , type = null , item ){
            if( type != null )
            {
                if( this[target] == type ) {
                    this[target] = 0
                } else {
                    this[target] = type
                }
            }
            else
            {
                this[target] = !this[target]
            }

            if(item){
                this.CurrItemInFo(item);
            }
            
        },

        // 选中index的详情
        CurrItemInFo( item ){
            console.log(item);
        },

        // 调取外部应用
        SubFun(index){
            console.log( index , '信息或者电话');
        }
    },
}
</script>

<style lang="scss" scoped>
  page{
      overflow-y: hidden;
  }
*{
    padding: 0;
    margin: 0;
}
    .wrap{
        width: 100%;
        height: 100%;
    }

    header{
        width: 100%;
        height: 220rpx;
        box-sizing: border-box;
        // background: #fff;
        // background: linear-gradient(left , #00f , #66f);
        padding: 130rpx 0 0 0;
        p{
            text-align: center;
            font-size: 18px;
            color: #000;
            // color: #fff;
        }
        border-bottom: 1rpx solid #999;
    }

    main{
        width: 100%;
        height: 505px;
        // height: 100%;
        position: relative;
        background: #fff;
        overflow: hidden;

        box{
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            justify-content: space-around;
            position: absolute;
            display: flex;
            z-index: 20;
            top: 0;
            left: 0;
            background: #fff;
        }

        .CarDiv{
            position: absolute;
            top: 100rpx;
            left: 0;
            width: 100%;
            background: #fff;

            display: flex;
            flex-direction: column;

            span{
                box-sizing: border-box;
                padding-left: 60rpx;
            }
        }

        .MB{
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            width: 100%;
            height: 1000000rpx;
            background: #0005;
        }

        .Main_div{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-top: 100rpx;
            overflow: auto;

            .Main_Item{
                width: 100%;
                box-sizing: border-box;
                padding: 10rpx 60rpx;
                font-size: 12px;

                .InFo_Img{
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 10rpx;
                    border: 1px solid #eee;
                    text-align: center;
                    line-height: 60rpx;
                    color: #999;
                    margin-left: 20rpx;
                }

                .Item_InFo{
                    display: flex;

                    justify-content: space-between;

                    .InFo_tite{
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        box-sizing: border-box;
                        padding: 20rpx 0 ;
                    }
                    margin-bottom: 20rpx;
                }

                >p{
                    border-bottom: 1px solid #eee;
                    height: 60rpx;
                    line-height: 60rpx;
                }

                .tagsDiv{
                    width: 100%;
                    height: 60rpx;
                    display: flex;
                    justify-content: space-between;
                    p{
                        padding-right: 20rpx;

                        span{
                            margin-right: 10rpx;
                        }
                    }
                }

                border-bottom: 1px solid #666;
            }
        }
    }

</style>